<template>
  <basic-modal
    title="交易流水"
    v-bind="$attrs"
    show-confirm
    :show-footer="false"
    width="900px"
  >
    <n-card size="small" content-class="flex flex-col flex-1">
      <div class="pb-2">
        <n-grid :col="24" x-gap="10">
          <n-gi :span="12">
            <n-date-picker
              type="daterange"
              clearable
              v-model:value="paginationResult.createTimeRange"
              @update:value="handleSearch"
            />
          </n-gi>
          <n-gi :span="12">
            <n-select
              clearable
              v-model:value="paginationResult.type"
              :options="variantTransactionOrderTypesList"
              placeholder="请选择订单类型"
              @update:value="handleSearch"
            />
          </n-gi>
        </n-grid>
      </div>
      <BasicTable
        :table-props="tableResult"
        :columns="columns"
        :pagination-props="paginationResult"
        maxHeight="66vh"
        minHeight="48vh"
      />
    </n-card>
  </basic-modal>
</template>

<script setup lang="ts">
import { watch, h } from "vue";
import dayjs from "dayjs";
import { Eye } from "@vicons/ionicons5";
import { debounce } from "lodash-es";
import { NButton, NIcon, NTag } from "naive-ui";
import { getVariantTransactionLogs } from "@/api/transactionLogs/transactionLogs.api";
import { useTableHook } from "@/components/normal/basicTable/useTableHook";
import {
  variantTransactionOrderTypes,
  variantTransactionOrderTypesList,
  variantStatusTypes,
} from "@/enums/orders/index";

const columns = [
  {
    title: "#",
    type: "index",
    key: "key",
    width: "5%",
    render: (_: any, index: number) => {
      return `${index + 1}`;
    },
  },
  {
    title: "数量",
    key: "qty",
  },
  {
    title: "订单类型",
    key: "type",
    render: (row: any) => {
      const targetType = getTransactionType(row.type);
      return h(
        NTag,
        {
          size: "small",
        },
        targetType?.name || "/"
      );
    },
  },
  {
    title: "订单号",
    key: "tradeNum",
    width: "20%",
  },
  {
    title: "状态",
    key: "currentStatus",
    render: (row: any) => {
      const targetType = getVariantStatusType(row.currentStatus);
      return h(
        NTag,
        {
          size: "small",
          type: targetType?.color,
        },
        targetType?.name || "/"
      );
    },
  },
  {
    title: "时间",
    key: "createTime",
    align: "right",
    width: "20%",
  },
  {
    title: "操作",
    key: "actions",
    align: "right",
    fixed: "right",
    render: (row: any) => {
      return h(
        NButton,
        {
          size: "small",
          type: "primary",
          secondary: true,
          strong: true,
          class: "mr-2",
          onClick: () => {},
        },
        {
          icon: () =>
            h(NIcon, null, {
              default: () => h(Eye),
            }),
        }
      );
    },
  },
];

interface IProps {
  variantId: string;
  inventoryId?: number | string;
}

const props = withDefaults(defineProps<IProps>(), {
  variantId: "",
  inventoryId: "",
});

const { tableResult, paginationResult, getDataList, handleChangePage } =
  useTableHook<any>({
    api: getVariantTransactionLogs,
    queryForm: {
      variantId: "",
      type: undefined,
      createTimeRange: null,
    },
    beforeFetch: (params) => {
      params.variantId = props.variantId;
      if (params.createTimeRange) {
        const [start, end] = params.createTimeRange;
        if (start) {
          params.createTimeStart = dayjs(start).format("YYYY-MM-DD 00:00:00");
        }

        if (end) {
          params.createTimeEnd = dayjs(end).format("YYYY-MM-DD 23:59:59");
        }
      }
    },
  });

watch(
  () => props.variantId,
  (newVal) => {
    if (newVal) {
      getDataList();
    }
  },
  {
    immediate: true,
  }
);

const getTransactionType = (value: string): Record<string, any> => {
  let result = {};
  if (value) {
    result = variantTransactionOrderTypes[value];
  }
  return result;
};

const getVariantStatusType = (value: string): Record<string, any> => {
  let result = {};
  if (value) {
    result = variantStatusTypes[value];
  }
  return result;
};

const handleSearch = debounce(function () {
  paginationResult.page = 1;
  getDataList();
}, 200);
</script>